<template>
    <view class="u-p-t-40 u-p-r-60 u-p-b-30 u-p-l-60 login">
        <u-avatar class="user-headimage" size="140" src="https://i2.hdslb.com/bfs/face/080218f1b3aeb740f569feb118170b40a348833c.jpg@240w_240h_1c_1s_!web-avatar-nav.avif" mode="circle"></u-avatar>
        <form class="forms" :model="loginModel" ref="form1">
            <view class="login-form-item">
                <u-icon name="account" class="input-icon"></u-icon>
                <input class="input-field" placeholder="请输入账户" v-model="loginModel.username" />
            </view>
            <view class="login-form-item">
                <u-icon name="lock" class="input-icon"></u-icon>
                <input class="input-field" placeholder="请输入密码" v-model="loginModel.password" type="password" />
            </view>
            <button class="login-btn">登录</button>
            <view class="passtext">
                <p @click="handleForgetPassword()">忘记密码</p>
                <p @click="handleRegister()">没有账号？去注册</p>
            </view>

            <view class="third-party-login">
                <text class="third-party-text">————— 第三方账号登录 —————</text>
                <view class="third-party-icons">
                    <image class="qq-login" src="/static/qq-icon.png" @click="handleQQLogin()"></image>
                    <image class="wechat-login" src="/static/wechat-icon.png" @click="handleWeChatLogin()">
                    </image>
                </view>
            </view>
        </form>

    </view>
</template>

<script setup>
    import {
        reactive
    } from 'vue';
    const loginModel = reactive({
        username: '',
        password: ''
    });
    const handleRegister = () => {
        uni.navigateTo({
            url: '/pages/register/register'
        });
    };

    const handleForgetPassword = () => {};
    const handleQQLogin = () => {};
    const handleWeChatLogin = () => {};
</script>

<style lang="scss" scoped>
    .user-headimage {
        margin-top: 20px;
        margin-bottom: 40px;
    }

    .login {
        height: 100vh;
        display: flex;
        align-items: center;
        flex-direction: column;

        /* 确保背景图覆盖整个元素 */
        .forms {
            width: 100%;
        }
    }

    .passtext {
        display: flex;
        justify-content: space-between;
        margin-top: 20px;
        font-size: 14px;
        color: #999;
        // color: #5677fc;
        margin-top: 15px;
    }

    .login-btn {
        font-size: 28rpx;
        background: #5677fc;
        color: #fff;
        height: 90rpx;
        line-height: 90rpx;
        border-radius: 50rpx;
        margin-top: 20px;
        box-shadow: 0 5px 7px 0 rgba(86, 119, 252, 0.2);
        width: 100%; // Ensure the button takes up full width
    }

    .input-field {
        font-size: 28rpx;
        color: #333;
        height: 90rpx;
        line-height: 90rpx;
        border-radius: 50rpx;
        padding-left: 20rpx;
        /* Space for icon */
        box-sizing: border-box;
        background-color: #f5f5f5;
        width: 100%;
        outline: none;
        border: none;
        flex-grow: 1;
    }

    .login-form-item {
        display: flex;
        align-items: center;
        margin-bottom: 20px;
        border-radius: 50rpx;
        background-color: #f5f5f5;
        padding: 0 20rpx;
    }

    .input-icon {
        font-size: 24px;
        color: #5677fc;
        padding: 15px;
    }

    .third-party-login {
        width: 100%;
        margin-top: 100px;
        margin-bottom: 60px;
        text-align: center;
        /* 居中对齐 */
    }

    .third-party-text {
        display: block;
        /* 确保文本单独成行 */
        margin-bottom: 10px;
        /* 根据需要调整间距 */
        font-size: 14px;
        color: #999;
    }

    .third-party-icons {
        display: flex;
        justify-content: center;
        /* 图标居中 */
        gap: 30px;
        /* 图标之间间距 */
    }

    .qq-login,
    .wechat-login {
        width: 30px;
        height: 30px;
    }
</style>